<template>
  <b-col v-if="result.total != 0">
    <!-- 循环体 -->
    <b-row class="px-4 mb-2" v-for="r in result.data" :key="r.id">
      <b-col class="border-bottom">
        <!-- 头像和用户名 -->
        <b-row>
          <b-col class="col-auto pt-2">
            <b-img-lazy blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" class="bg-white border" rounded="circle"
              height="40" width="40" :src="r.user.headUrl" />
          </b-col>
          <b-col style="font-size:16px">
            <b-row class="pt-2">
              <b-col class="col-auto px-0">
                {{r.user.name}}
              </b-col>
              <b-col class="col-auto pl-1">
                <b-badge>
                  Lv {{r.user.level}}
                </b-badge>
              </b-col>
            </b-row>
            <b-row class="text-muted" style="font-size:14px;font-family:HYZhengYuan-55S">
              发布时间 {{getTime(r.time)}}
            </b-row>
          </b-col>
        </b-row>
        <!-- 内容 -->
        <b-row>
          <b-col class="col-auto pt-2">
            <div style="height:40px;width:40px" />
          </b-col>
          <b-col>
            <b-row>
              <b-col class="pl-0">
                <p @click="toDetail(r.id)" class="content overflow-hidden">
                  {{r.content}}
                </p>
              </b-col>
            </b-row>
            <!-- 图片栏位 -->
            <b-row v-if="r.imageUrl" class="text-center mb-3">
              <b-col @click="toDetail(r.id)" v-for="(u,index) in getUrlList(r.imageUrl)" :key="u" class="col-auto pr-0" :class="{'pl-0':index==0}">
                <b-img class="rounded border" width="80" height="80" :src="u" />
              </b-col>
            </b-row>
          </b-col>
          <!-- 参数 -->
          <b-col class="col-auto" align-self="end">
            <b-row style="width:80px">
              <span class="iconfont icon-good">{{r.likeNum}}</span>
            </b-row>
            <b-row class="mb-2" style="width:80px">
              <span class="iconfont icon-comment">{{r.commentNum}}</span>
            </b-row>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="result.total > 10">
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="'SearchResult?text='+this.$route.query.text+'&page='" :value="result.page"
          align="center" size="md" :number-of-pages="Math.ceil(result.total/10)" />
      </b-col>
    </b-row>
  </b-col>
  <b-col v-else class="text-center mt-3">
    <h4>
      没有搜索到哦
    </h4>
  </b-col>
</template>
<script>
import tool from '@/utils/tool';
export default {
  props: {
    text: String,
  },
  data() {
    return {
      result: {
        total: 0
      },
    }
  },
  created() {
    this.search(this.text, this.$route.query.page);
  },
  methods: {
    // 获取搜索结果
    search(text, page) {
      this.$httpIssue.search(text, page, "dynamic").then((res) => {
        // console.log(res);
        this.result = res;
      }).catch((err) => {
        if (err == "timeOut") {
          this.timeOut = true;
        }
      });
    },
    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },
    //分离图片
    getUrlList(url) {
      return url.split(",");
    },
    //跳转到详情
    toDetail(id) {
      this.$pageRedirect.toADDetails(id, "dynamic");
    },
  },
}
</script>
<style scoped>
.content {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.content:hover {
  color: #838383;
  cursor: pointer;
}
</style>
